<script setup>
import { reactive, ref } from "vue";
const count = ref(null); // ref的参数也可以是null
console.log('count', count);
const handleClickAdd = () => {
    count.value++
}

// const userInfo = ref({ name: 'aa', age: 10})
// console.log(userInfo) //userInfo 包含一个value
//
// const handleUpdateUserAge = () => {
//     userInfo.value.age++
// }
//

const userInfo = reactive({name: 'aa', age: 10})
console.log('userInfo', userInfo)
const handleUpdateUserAge = () => {
    userInfo.age++
}


// const name = reactive("123") // 参数必须是对象，此处返回的也是123字符串
// console.log(name)

let users = ref([
    {
        name: 'a',
        age: 10
    },
    {
        name: 'b',
        age: 12
    }
])

// 有效
const handleClickAddUser = () => {
    users.value.push({
        name: 'c',
        age: 17
    })
}

// 有效
const handleClickDeleteAge = () => {
    const userNum = users.value.length
    users.value.splice(userNum - 1, 1)
}

// 有效
const handleClickAddAge = () => {
    users.value.forEach(user => {
        user.age++
    })
}

</script>

<template>
    <div>
        <span>ref变量</span>
        <span>{{ count }}</span>
        <button @click="handleClickAdd">add</button>
    </div>
    <div>
        <span>ref 内容是对象</span>
        <span>{{ userInfo.age }}</span>
        <button @click="handleUpdateUserAge">updateUserInfo</button>
    </div>
    <div>
        <div>定义数组的ref方式</div>
        <div v-for="user in users">
            <span>{{ user.name }}</span>
            <span>{{ user.age }}</span>
        </div>
        <div>
            <button @click="handleClickAddUser">添加一个用户</button>
            <button @click="handleClickDeleteAge">删除一个用户</button>
            <button @click="handleClickAddAge">所有用户年龄+1</button>
        </div>
    </div>
</template>

<style scoped>

</style>
